// import {delCamera} from '@/api/videoSurveillance'
import {CCard} from '@/components/card'
import EditCameraModal from '@/components/modal/editCameraModal'
import {CnMediumSpan} from '@/components/text'
import ezuikitJS from 'ezuikit-js'
import {PropType} from 'vue'

const VedioPlay = defineComponent({
  props: {
    id: {
      type: String,
      required: true
    },

    option: {
      type: Object as PropType<Camera.Info>,
      required: true
    }
  },
  emits: {
    success: (): boolean => true,
    error: (): boolean => true
  },
  setup(props, {emit}) {
    const play = ref<ezuikitJS.EZUIKitPlayer | undefined>(undefined)
    const openEditCameraModal = ref<() => void>(() => {})
    watch(
      () => props.option,
      (n, o) => {
        if (n.cameraUrl !== o.cameraUrl) {
          initVideo()
        }
      }
    )

    async function initVideo() {
      if (play.value !== undefined) {
        play.value?.stop()
        play.value = undefined
        initVideo()
        return
      }

      const player1 = new ezuikitJS.EZUIKitPlayer({
        id: props.id,
        accessToken: props.option.accessToken,
        url: props.option.cameraUrl,
        audio: 0,
        template: 'security',
        width: 960,
        height: 620
      })
      play.value = player1
    }

    onMounted(() => {
      const doms = document.querySelectorAll(`#${props.id}`)
      if (doms.length === 1) {
        initVideo()
      } else {
        console.error(
          `监控容器id名有重复，已取消id名为${props.id}的${doms.length}个监控画面显示，请排查！`
        )
      }
    })

    onUnmounted(() => {
      play.value?.stop()
    })

    return () => [
      <div style='position:reactive'>
        <div class='bg1'>{/* <img src='' /> */}</div>
        <div class='flex items-center justify-between gap-x-16 py-12'>
          <div class='cardConf'>
            <div class='card'>
              <div class='img'></div>
              <div class='info' style='margin-top:10px'>
                <CnMediumSpan>{props.option.cameraName || '暂未设置摄像头名称'}</CnMediumSpan>
              </div>
              <a-button
                type='primary'
                style='margin-top:20px;z-index:100'
                class='font-medium'
                onClick={openEditCameraModal.value}
              >
                修改配置
              </a-button>
            </div>
          </div>

          <div class='flex items-center gap-x-18'>
            {/* <a-popconfirm
                  title={'确定删除摄像头《' + props.option.cameraName + '》?'}
                  ok-text='确认'
                  cancel-text='取消'
                  onConfirm={() => {
                    delCamera({cameraId: props.option.cameraId})
                      .then(res => {
                        emit('success')
                      })
                      .catch(err => {})
                  }}
                >
                  <a-button type='danger'>删除</a-button>
                </a-popconfirm> */}
          </div>
        </div>
      </div>,
      // <CCard
      //   title={props.option.cameraName || '暂未设置摄像头名称'}
      //   style=''
      //   v-slots={{
      //     title: () => (

      //     )
      //   }}
      //   class='shadow-none p-0'
      // >
      <div id={props.id}></div>,
      <EditCameraModal
        option={props.option}
        onLoad={open => {
          openEditCameraModal.value = open
        }}
        onSuccess={() => {
          emit('success')
        }}
        onError={() => {
          emit('error')
        }}
      ></EditCameraModal>
    ]
  }
})

export default VedioPlay
